<div class="content">
    <div id="example_title">
        <h1>Local or Remote Data Source</h1>
        The data in the grid might come from a local or remote data source. If you define <span class="method">grid.url</span>
        property, the grid will assume that your data source is remote. Otherwise, the data source is local (all records are stored in
        <span class="method">grid.records</span>) array. If data source is remote, the grid will:
        <ul>
            <li>Pull records from the server on render</li>
            <li>Pull records from the server on reload</li>
            <li>Pull more records when user scrolls (if needed)</li>
            <li>Submit search to the server (user types in a search field)</li>
            <li>Submit sort to the server (user click on the column)</li>
            <li>Submit delete when user clicks and confirms delete operation</li>
            <li>Submit save when user clicks the save button</li>
        </ul>
        Below is the example of the grid with local data source.
    </div>
    <div id="example_view"></div>
    <div id="example_code"></div>
</div>

<!--CODE-->
<div id="grid" style="width: 700px; height: 350px;"></div>

<!--CODE-->
<script type="module">
import { w2grid } from '__W2UI_PATH__'

let grid = new w2grid({
    name: 'grid',
    box: '#grid',
    searches: [
        { field: 'fname', text: 'First Name', type: 'text' },
        { field: 'lname', text: 'Last Name', type: 'text' },
        { field: 'email', text: 'Email', type: 'text' }
    ],
    sortData: [ { field: 'lname', direction: 'asc' } ],
    columns: [
        { field: 'recid', text: 'ID', size: '50px', sortable: true },
        { field: 'fname', text: 'First Name', size: '30%', sortable: true },
        { field: 'lname', text: 'Last Name', size: '30%', sortable: true },
        { field: 'email', text: 'Email', size: '40%' },
        { field: 'sdate', text: 'Start Date', size: '120px' }
    ],
    records: [
        { fname: 'John', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 2, fname: 'Stuart', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 3, fname: 'Jin', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 4, fname: 'Susan', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 5, fname: 'Kelly', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 6, fname: 'Francis', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 7, fname: 'Mark', lname: 'Welldo', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 8, fname: 'Thomas', lname: 'Bahh', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 9, fname: 'Sergei', lname: 'Rachmaninov', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 20, fname: 'Jill', lname: 'Doe', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 21, fname: 'Frank', lname: 'Motzart', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 22, fname: 'Peter', lname: 'Franson', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 23, fname: 'Andrew', lname: 'Ottie', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 24, fname: 'Manny', lname: 'Silver', email: 'jdoe@gmail.com', sdate: '4/3/2012' },
        { recid: 25, fname: 'Ben', lname: 'Gatos', email: 'jdoe@gmail.com', sdate: '4/3/2012' }
    ]
})
</script>
